<template>
  <div class="flex flex-col text-white">
    <a v-if="picInfoArr[0]" class="xl:h-[445px] relative scale-wrapper">
      <NuxtImg :src="picInfoArr[0].picSrc" />
      <div
        class="absolute z-10 left-5 bottom-2 md:left-7 md:bottom-7 text-sm md:text-lg"
      >
        <h4>{{ picInfoArr[0].title }}</h4>
        <h4>{{ picInfoArr[0].date }}</h4>
      </div>
    </a>
    <div class="flex flex-col xl:flex-row xl:h-[224px]">
      <a class="xl:w-1/2 scale-wrapper" v-if="picInfoArr[1]">
        <NuxtImg :src="picInfoArr[1].picSrc" />
        <div
          class="absolute z-10 left-5 bottom-2 md:left-7 md:bottom-7 text-sm md:text-lg"
        >
          <h4>{{ picInfoArr[1].title }}</h4>
          <h4>{{ picInfoArr[1].date }}</h4>
        </div>
      </a>
      <a class="xl:w-1/2 scale-wrapper" v-if="picInfoArr[2]">
        <NuxtImg :src="picInfoArr[2].picSrc" />
        <div
          class="absolute z-10 left-5 bottom-2 md:left-7 md:bottom-7 text-sm md:text-lg"
        >
          <h4>{{ picInfoArr[2].title }}</h4>
          <h4>{{ picInfoArr[2].date }}</h4>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ThreePicInfo } from "./ArtopgroupThreePicShow.d.ts";

withDefaults(defineProps<{ picInfoArr?: ThreePicInfo[] }>(), {
  picInfoArr: () => [],
});
</script>

<style scoped lang="scss">
.scale-wrapper {
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.2;
    background-color: black;
    z-index: 2;
    transition: opacity 0.3s;
  }

  > img {
    transition: transform 3s;
  }
  &:hover {
    > img {
      transform: scale(1.05);
    }
    &::before {
      opacity: 0.1;
    }
  }
}
</style>
./index.js
